window.onload = async function(){
  const res = await get('/dashboard')
  const{
    data:{overview, year}
  }=res
  console.log('res:',res)
  for(let key in overview){
    document.querySelector('[name='+key).innerHTML = overview[key]
  }
}
renderYear(year)
renderDear(salaryData)
renderGroupChart(groupData)
renderSalaryPieChart(salaryData)
// 年薪资
const renderYear = data => {
  console.log(data)
  const myChart = echarts.init(document.getElementById('line'))

      myChart.setOption ({
          title: {
            text:'前端36期薪资走向',
            top:'5%',
            left:'2%'
          },
          xAxis:{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine:{
              lineStyle:{
              type:'dashed',
              color:"#223"
              }
            },
          } ,
          yAxis: {
            type: 'value',
            splitline :{
              lineStyle :{
                type:'dashed'
              },
              },
            },
            grid:{
              top :'20%',
            },
            color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: 'red' 
                }, {
                    offset: 1, color: 'blue' 
                }],
                global: false 
              },
          tooltip :{
            trigger:'axis',
          },
          series:[
            {
              data: data.map(item => item.salary),
              type: 'line',
              smooth: true,
              lineStyle:{
                width:6,
              },
            
            SymbolSize: 10,
            areaStyle:{
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#499FEE",
                },
                {
                  offset: 0.8,
                  color: "rgba(255,255,255,0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(255,255,255,0)",
                },
              ]),
            },
          },
          ],
        })
      };
// 薪资分布
const renderDear = data => {
        console.log(data)
        const option = echarts.init(document.getElementById("#salary"))
            option.setOption ({
              title:{
                text:'班级薪资分布',
                top:'3%',
                left:'2%'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '90%',
                left: 'center'
              },
              series: [
                {
                  name: '班级薪资分布',
                  type: 'pie',
                  radius: ['50%', '64%'],
                  center: ["50%", "45%"],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '40',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    { value: 1048, name: '1万以下' },
                    { value: 235, name: '1万-1.5万' },
                    { value: 735, name: '1.5万-2万' },
                    { value: 580, name: '2万以上' },
                  ]
                }
              ]
            })
      };
// 每组薪资
const renderGroupChart = (data,num = 1) => {
  console.log(data);
  // 初始化图表
  const myEchart = echarts.init(document.querySelector("#lines"));
  const option = {
    grid: {
      left: 70,
      top: 30,
      right: 30,
      bottom: 50,
    },
    xAxis: {
      type: "category",
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'ooi'],
      data: data[1].map((item) => item.name),
      axisLine: {
        lineStyle: {
          color: "#ccc",
          type: "dashed",
        },
      },
      axisLabel: {
        color: "#999",
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    tooltip: {
      trigger: "item",
    },
    color: [
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#34D39A", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(52,211,154,0.2)", // 100% 处的颜色
          },
        ],
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#499FEE", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(73,159,238,0.2)", // 100% 处的颜色
          },
        ],
      },
    ],
    series: [
      {
        // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
        data: data[1].map((item) => item.hope_salary),
        type: "bar",
        name: "期望薪资",
      },
      {
        // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
        data: data[1].map((item) => item.salary),
        type: "bar",
        name: "就业薪资",
      },
    ],
  };
  myEchart.setOption(option);
  const btns = document.querySelector("#btns");
  btns.addEventListener("click", (e) => {
    if (e.target.tagName === "BUTTON") {
      btns.querySelector(".btn-blue")?.classList.remove("btn-blue");
      e.target.classList.add("btn-blue");
      const group = e.target.innerText;
      // 切换数据
      option.xAxis.data = data[group].map((item) => item.name);
      option.series[0].data = data[group].map((item) => item.hope_salary);
      option.series[1].data = data[group].map((item) => item.salary);
      myEchart.setOption(option);
    }
  });
      };
// 男女薪资
const renderSalaryPieChart = data =>{
  console.log(data)
        const myEchard = echarts.init(document.getElementById("#gender"));
        myEchart.setOption({
          title: [
            {
              text: "男女薪资分布",
              left: 10,
              top: 10,
              textStyle: {
                fontSize: 16,
              },
            },
            {
              text: "男生",
              left: "50%",
              top: "45%",
              textAlign: "center",
              textStyle: {
                fontSize: 12,
              },
            },
            {
              text: "女生",
              left: "50%",
              top: "85%",
              textAlign: "center",
              textStyle: {
                fontSize: 12,
              },
            },
          ],
          color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              type: "pie",
              radius: 50,
              radius: ["20%", "30%"],
              center: ["50%", "30%"],
              datasetIndex: 1,
              // data: [{name:'1万以下',value: 4},...]
              data: data.map((item) => ({ name: item.label, value: item.b_count })),
            },
            {
              type: "pie",
              radius: 50,
              radius: ["20%", "30%"],
              center: ["50%", "70%"],
              datasetIndex: 2,
              // data: [{name:'1万以下',value: 4},...]
              data: data.map((item) => ({ name: item.label, value: item.g_count })),
            },
          ],
        });
      };
